<template>
  <div class="facilityInformationEdit">
    <el-row class="facilityInformationEdit-a height40">
      <span class="height40-span">
        <img :src="image.juxing_Small" alt />
      </span>
      <span class="height40-span">{{facilityManagement.facilityInformationEdit}}</span>
    </el-row>
    <el-row class="facilityInformationEdit-b">
      <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-position="top"
      class="demo-ruleForm"
    >
        <el-form-item :label="facilityManagement.facilityName" prop="facilityName">
          <el-input v-model.trim="ruleForm.facilityName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="facilityManagement.telephone" prop="telephone">
          <el-input v-model.trim="ruleForm.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="facilityManagement.address" prop="address">
          <el-input v-model.trim="ruleForm.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="facilityManagement.phone" prop="phone">
          <el-input v-model.trim="ruleForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-col :span="12">
              <Kt-button class="cancelBtn boxShadowButton" :size="size" :label="facilityManagement.cancel" @click="cancel"></Kt-button>
            </el-col>
            <el-col :span="12" align="right">
              <Kt-button class="submitBtn boxShadowButton" :size="size" :label="facilityManagement.update" @click="submitForm('ruleForm')"></Kt-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import KtButton from "@/components/KtButton";
import bus from "../../../vuex/eventBus"; //引入eventBus,接收子界面传递的跳转指令,然后在父界面跳转,添加tab
import juxing_Small from "../../../assets/lifeGroupimg/juxing_small.png";
export default {
  name:"FacilityInformationEdit",
  data(){
    return {
      facilityManagement: this.$t("m.facilityManagement"), //引入 lang 里面的字符串资源,
      size:"mini",//按钮的尺寸
      image:{juxing_Small,},
      ruleForm:{
        facilityName:"",//设施名称
        telephone:"",//设施移动电话
        address:"",//地址
        phone:"",//电话
      },
      groupInfoFlag:"",//查询机构信息是否存在
      acceptLanguage:'ja_JP',//数据请求传参需要传的语言  ja_JP----日文
    }
  },
  methods:{
    /* 
      取消
    */
    cancel(){
      console.log("跳转")
      bus.$emit("homePage",{type:"remove",path:"/FacilityInformationEdit",showpath:"/FacilityManagement"});
    },

    /* 
      更新
    */
    submitForm(datainfo){
      console.log(datainfo,"------");
      this.$refs[datainfo].validate((valid) => {
        if (valid) {
          let params=new Object();
          params.groupame=this.ruleForm.facilityName;
          params.contactPhone=this.ruleForm.telephone;
          params.detailAddress=this.ruleForm.address;
          params.addressPhone=this.ruleForm.phone;
          console.log(params);
          console.log(this.groupInfoFlag);
          //this.groupInfoFlag 为true就调修改接口  否则就调新增接口
          var url="";
          url=this.groupInfoFlag==true ? this.ports.facilityManagement.undateGroupInfo : this.ports.facilityManagement.addGroupInfo;
          console.log(url);
          this.$postJson(url,params,this.acceptLanguage).then(res=>{
            console.log(res)
            if(res.code==200){
              this.$message({message:res.message,type:"success"});
              setTimeout(()=>{
                bus.$emit("homePage",{type:"remove",path:"/FacilityInformationEdit",showpath:"/FacilityManagement"});
                bus.$emit("refreshGroupInfo");
              },100)
            }else{  
              this.$message({message:res.message,type:"error"});
            }
          })
        }else{
          console.log('提交失败!');
          return false;
        }
      })
    },

    /* 
      查询机构信息是否存在
    */
    /* 
      查询机构信息
    */
    queryGroupInfo(){
      this.$postForm(this.ports.facilityManagement.queryGroupInfo,{},this.acceptLanguage).then(res=>{
        console.log(res);
        if(res.code==200){
          if(res.result!=null){
            this.groupInfoFlag=true;//机构信息存在
            this.ruleForm.facilityName=res.result.groupame;
            this.ruleForm.telephone=res.result.contactPhone;
            this.ruleForm.address=res.result.detailAddress;
            this.ruleForm.phone=res.result.addressPhone;
          }else{
            this.groupInfoFlag=false;//机构信息不存在
          }
        }
      })
    },
  },
  computed: {//使用computed计算属性来操作form表单规则的国际化
    rules() {//此处的rules 是你声明的名字，参考下图
      var validate_Types = (rule, value, callback) => {
        //兑换类型规则
        if (this.ruleForm.facilityName == "") {
          callback(new Error(this.$t("m.facilityManagement.empty")));
        }
        callback();
      };
      return {
        facilityManagement: this.$t("m.facilityManagement"), //引入 lang 里面的字符串资源,
        //注意此处的return，别忘记了
        facilityName: [
          {required:true, validator: validate_Types, trigger: "blur" },
          { min: 1, max:15,  message: this.$t("m.facilityManagement.length15"), },
        ],
        telephone: [
          {
            required: true,
            message: this.$t("m.facilityManagement.empty"),
            trigger: "blur"
          },
          {
            min: 1,
            max: 20,
            message: this.$t("m.facilityManagement.length20"),
            trigger: "blur"
          }
        ],
        address: [
          {
            required: true,
            message: this.$t("m.facilityManagement.empty"),
            trigger: "blur"
          },
          {
            min: 1,
            max: 25,
            message: this.$t("m.facilityManagement.length25"),
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            message: this.$t("m.facilityManagement.empty"),
            trigger: "blur"
          },
          {
            min: 1,
            max: 20,
            message: this.$t("m.facilityManagement.length20"),
            trigger: "blur"
          }
        ],
      };
    }
  },
  created() {

  },
  mounted() {
    this.queryGroupInfo();
  },
  components:{
    KtButton,
  }
}
</script>
<style lang="scss" scoped>
  .facilityInformationEdit{
    padding-bottom:20px;
    .height40{
      height: 40px;
      line-height: 40px;
      .height40-span {
        display: inline-block;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        font-weight: 700;
        img {
          vertical-align: middle;
          margin-right: 15px;
        }
      }
    }
    .facilityInformationEdit-b{
      width:50%;
      padding:40px 30px;
      .select100{
        width: 100%;
      }
      /* 取消按钮  修改样式 添加阴影 */
      .cancelBtn{
        background: #dddddd;
        color:#010101;
      }
      /* 更新按钮  修改样式  添加阴影 */
      .submitBtn{
        background: #E6A23C;
        color:#ffffff;
      }
    }
  }
  /* 修改element-ui input文本框默认的样式 */
  /deep/ .facilityInformationEdit-b .el-input__inner{
    border:none !important;
    border-radius:0px !important;
    border-bottom:1px solid #999999 !important;
    background-color: #f6f6f6 !important;
  }

  /* 修改每一个form表单小项的margin */
  /deep/ .facilityInformationEdit-b .el-form-item {
    margin-bottom: 42px !important;
  }

  /* 修改element-ui 表格label的样式 */
  /deep/ .facilityInformationEdit-b .el-form-item__label {
    padding: 0 0 0px !important;
    line-height: 10px !important;
    color:#0000ff !important;
  }
</style>